<template>
  <div class="login_wrap">
    <div class="login_form">
      <div class="logo"></div>
      <div class="form_wrap">
        <LoginForm class="login-form" @submit="onSubmit"></LoginForm>
      </div>
      <div class="bottom_part">
          <div>版权：南京市民政局</div>
          <div class="string_part"></div>
          <div class="footer_part">
            <div>运营单位:南京市民政局</div>
            <div>|</div>
            <div>技术支持: 南京市爱普雷德电子科技有限公司</div>
          </div>
        </div>
    </div>
    <!-- <div class="login_footer">
      <div class="unit">运营单位:南京市养老服务质量指导中心</div>
      <div class="copyright">版权：南京市民政局</div>
      <div class="support">技术支持: 南京市爱普雷德电子科技有限公司</div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import LoginForm from '@/views/admin/userLogin/LoginForm.vue'
import { useUserStore } from '@/stores/user'
import { ElLoading } from 'element-plus'
import {xxtea_encrypt} from '@/utils/xxtea.js'

const router = useRouter()
const { userLogin } = useUserStore()

const spinning = ref(false)
const onSubmit = (val) => {
  spinning.value = true
  const loading = ElLoading.service({
		lock: true,
		text: '验证成功,正在初始化中',
		background: 'rgba(0, 0, 0, 0.6)',
	})
  let copyVal = JSON.parse(JSON.stringify(val))
  copyVal.username = xxtea_encrypt(copyVal.username)
  userLogin(copyVal, 'account').then((res) => {
    router.push('/')
    setTimeout(() => {
      loading.close()
    }, 500);
  }).catch(()=> {
    loading.close()
  })
}
</script>

<style lang="scss" scoped>
@import '@/styles/scss/login.scss';

.login_wrap {
  width: 100%;
  min-height: 100%;
  background: url('@/assets/imgs/login_bg.png') no-repeat center;
  background-size: 100% 100%;
  position: relative;
  user-select: none;
  .login_form {
    max-width: 40rem;

    position: absolute;
    top: 11rem;
    right: 205px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    // background: #fff;
    .logo {
      width: 524px;
      height: 52px;
      background: url('@/assets/imgs/login_logo.png') no-repeat center;
      background-size: contain;
    }

    .form_wrap {
      margin-top: 52px;
      width: 100%;
      height: 50vh;
      min-height: 31rem;
      // border-radius: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      background: #fff;
      padding: 3.5rem 5.3rem 5rem;
    }
  }

  .login_footer {
    width: 100%;
    position: absolute;
    ;
    bottom: 30px;
    font-size: 12px;
    color: #fff;
    opacity: .5;
    display: flex;
    padding: 0 220px;
    justify-content: space-between;

    .support {
      opacity: 1;
    }
  }
}
.bottom_part{
  padding: 0px 0px 20px 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  // border-radius: 10px;
  background: #fff;
  margin: 0px auto;
  font-size: 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.string_part{
  height: 2px;
  width: 100%;
  background-color:#f8f8f8;
  margin: 10px 0;
}
.footer_part{
  width: 85%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

</style>